<template>
<!--新碟展示-->
  <div class="showSongs">
    <div @click="skipGrabble('songListShow',songsInfo.id)">
      <img :src="songsInfo.coverImgUrl" alt />
      <i class="ico"></i>
    </div>
    <p>{{songsInfo.name}}</p>
    <p class="grey">播放量：{{ Math.round((songsInfo.playCount /10000) * 100) / 100}}万</p>
  </div>
</template>

<script>
export default {
  name: "showSongs",
  props: ["songsInfo"],
  methods:{
    skipGrabble(path, val) {
      this.$router.push({
        name: path,
        query: {
          keyWord: val
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.showSongs {
  display: inline-block;
  width: 200px;
  
  cursor: pointer;
  div {
      position: relative;
    img {
      width: 100%;
    }
    img:hover+i{
        display: block;
    }
    i.ico {
      width: 40px;
      height: 40px;
      position: absolute;
      background: url(~@/assets/img/play.png);
      background-size: contain;
      top: calc(50% - 20px);
      left:calc(50% - 20px);
      display: none;
    }
    i.ico:hover{
        display: block;
    }
  }

  p {
    margin: 8px 0;
    width: 100%;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  p.grey {
    color: #999;
    font-size: 14px;
  }
}
</style>